FlyTalk.views.RestaurantView = Ext.extend(Ext.Panel, {
	fullscreen: true,
	title: 'Restaurants',
	layout: 'card',
	
	   				
    initComponent: function () {
        this.backButton = new Ext.Button({
			text: 'Back',
			ui: 'back',
			handler: this.backButtonTap,
			scope: this
		});
        
        /*this.filterButton = new Ext.Button({
        	iconMask: true, 
        	ui: 'plain', 
        	iconCls: 'add',
			handler: this.filterButtonTap,
			scope: this
		});
        */
		this.toolbar = new Ext.Toolbar({
				title: 'Restaurants',
				doc: 'top',
				layout: 'hbox',
				items: [
					this.backButton,
					{xtype: 'spacer'},
					//this.filterButton,
				]
		});
		
			
		
		//specify the image buttons here
		//template for image buttons
		
		//lets hide this for now
		var mapButtonTpl = new Ext.XTemplate(
				'<img src={src} alt="" />',
				'<p style="font-size:small">{btnText}</p>'
			);
		
		this.imageButton1 = new Ext.Button({
			data:{
				src: "images/schipol1.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="99"/></div>',
			tpl:mapButtonTpl,
			flex:1,
			handler: this.tapImage1,
			scope: this
		});
		
		this.imageButton2 = new Ext.Button({
			data:{
				src: "images/schipol2.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			flex:1,
			handler: this.tapImage2,
			scope: this
		});
		
		this.imageButton3 = new Ext.Button({
			data:{
				src: "images/schipol3.png",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			flex:1,
			handler: this.tapImage3,
			scope: this
		});
		
		this.BodyPanel = new Ext.Panel({
			//autoLoad: true,
			scroll: true,
            fullscreen: true,
            layout: 'hbox',
          // align: 'stretch',
			//flex:1,
			items: [this.imageButton1, this.imageButton2, this.imageButton3],
		});
		
		
		
		this.overlayImage1 = new Ext.BoxComponent({
            floating: true,
            modal: true,
          layout:'fit',
			  hideMode:'close',
		     html: '<img id="burgerking" src="./images/BurgerKingBubble.png" ></img>',
		     });
		
		
		this.overlayImage2 = new Ext.BoxComponent({
            floating: true,
            modal: true,
         		layout:'fit',
			  hideMode:'close',
		     html: '<img id="burgerking" src="./images/CafeRembrandtBubble.png" ></img>',
		     });
		
		this.overlayImage3 = new Ext.BoxComponent({
            floating: true,
            modal: true,
          	layout:'fit',
			   hideMode:'close',
		    html: '<img id="burgerking" src="./images/HelloThereBubble.png" ></img>',
		     });
			
			
		this.dockedItems = [this.toolbar];
		this.items=[this.BodyPanel];
			
		FlyTalk.views.RestaurantView.superclass.initComponent.call(this);
		 
    },
    
    backButtonTap: function () {
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'closeRestaurantView'
        });
    },
    
    tapImage1: function () { // to open the overlay 
    
    this.overlayImage1.setCentered(false);
    	this.overlayImage1.show();
    },
    
    tapImage2: function () { // to open the overlay 
        
        this.overlayImage2.setCentered(true);
        	this.overlayImage2.show();
        },
        
        tapImage3: function () { // to open the overlay 
            
            this.overlayImage3.setCentered(true);
            	this.overlayImage3.show();
            },
    
    /*filterButtonTap: function () { // to open the image overlay 
    	this.overlay.setCentered(true);
    	//this.overlayTb.setTitle('Map Functions');
    	this.overlay.show();
    }*/
   
});